<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
</head>
<style>
    
    .nav{
        width: 100%;
        height: 40px;
        background-color: #333333;
        padding: 8px;
        box-sizing: border-box;

    }
    .nav a:hover{
        text-decoration: none;
        color: white;
    }
    .nav a{
        color: #b0b0b0;
        font-size: 12px;

    }
    .nav>.left{
        float:left
    }
    .nav>.left>li{
        display: inline-block;
        vertical-align: middle;
    }
    .nav>.right{
        float: right;
    }
    .nav>.right>li{
        display: inline-block;
        vertical-align: middle;
    }
    .nav li>a>span{
        display: inline-block;
        vertical-align: middle;
        width: 2px;
        height: 10px;
        background-color: rgb(66, 66, 66);
        margin-left: 3px;
    }


    img{
        width: 100%;
        height: auto;
    }
    .banner-container{
	width:100%;
	height:660px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
    }
    .banner-container .banner-img-container {
	width:6000px;
	height:660px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
	animation: run 10s ease infinite;
    }
    .banner-container .banner-img-container img{
	width:1560px;
	height:100%;
    }
    @keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1600px);
	}
	
    }
    #img04,#img05,#img06,#img07,#img08,#img09{
        margin: 1rem auto;
    }

    /* 底部样式开始 */
    .dibu {
        display: block;
        position: relative;
        left: -840px;
        width: 360px;
        height: 100px;
        /*background: url(imgs/spr.png) no-repeat 0px 40px;*/
    }
    .ziti {
        font-size: 12px;
        color: gray;
        margin-left: 4px;
    }
    .you a {
        display: block;
        float: left;
        font-size: 12px;
        color: gray;
        margin: 0 2px 0 2px;
    }
    .fengexian {
        display: block;
        float: left;
        background-color: rgb(99, 99, 99);
        width: 1px;
        height: 10px;
        margin-top: 5px;
    }
    .sss{
        position: relative;
        top: -10px;
    }
    .sss1{
        position: relative;
        top: -20px;
    }
    .gj {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 15px;
        top: 3px;
        /*background: url(imgs/gswj.png) no-repeat;*/
    }

    .wwy {
        position: relative;
        top: 3px;
        display: inline-block;
        width: 20px;
        height: 15px;
        /*background: url(imgs/icplogo.png) no-repeat;*/
    }
    .down{
        margin: auto;
    }
    /* 底部样式结束 */
    
</style>

<body>
    <!-- 导航条开始 -->
<div class="nav">
    <ul class="left">
        <li><a href="Shop.html">小米商城<span></span></a></li>
        <li><a href="main.html">小米官网<span></span></a></li>
        <li><a href="">IoT<span></span></a></li>
        <li><a href="">云服务<span></span></a></li>
        <li><a href="">有品<span></span></a></li>
        <li><a href="">小爱开放平台<span></span></a></li>
        <li><a href="">企业团购<span></span></a></li>
        <li><a href="">资质证照<span></span></a></li>
        <li><a href="">协议规则<span></span></a></li>
        <li><a href="">下载APP<span></span></a></li>
        <li><a href="">智能生活<span></span></a></li>
    </ul>
    <ul class="right">
        <li><a href="log.html">登录<span></span></a></li>
        <li><a href="">注册<span></span></a></li>
        <li><a href="">消息通知</a></li>
    </ul>

</div>
<!-- 导航条结束 -->


 <!-- 主页开始 -->
  <div class="top">
    <div id="img01" >
        <img src="img/main01.jpeg" alt="">
    </div>
    <div class="banner-container">
        <div class="banner-img-container">
            <img src="img/main02.jpeg" alt="">
            <img src="img/main03.jpeg" alt="">
        </div>
    </div>
    <div id="img04" >
        <img src="img/main04.jpeg" alt="">
    </div>
    <div id="img05" >
        <img src="img/main05.jpeg" alt="">
    </div>
    <div id="img06" >
        <img src="img/main06.jpeg" alt="">
    </div>
    <div id="img07" >
        <img src="img/main07.jpeg" alt="">
    </div>
    <div id="img08" >
        <img src="img/main08.jpeg" alt="">
    </div>
    <div id="img09" >
        <img src="img/main09.jpeg" alt="">
    </div>
    


  
<!-- 主页结束 -->
<!-- 底部开始 -->
</div>
<div class="down">
  <a href="" class="dibu"></a>
  <hr>
  <div class="zuo">
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <span class="ziti">小米商城</span>
    <p class="ziti">小米商城，小米商城，小米商城，小米商城，小米商城，小米商城，小米商城，小米商城</p>
  </div>
  <div class="you">
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><span class="fengexian"></span>
    <a href="">asdasda</a><br>
    <p class="sss"><a href=""><span class="gj"></span>工商国监电子标识</a></p><br>
    <p class="sss1"><a href=""><span class="wwy"></span>文网游备字</a></p>
  </div>
</div>
<!--底部结束-->
    

    


</body>

</html>